<template>
    <div class='fxn-body'>
        <el-page-header @back="handlePath(1)">
            <template #content>
            <span class="text-large font-600 mr-3"> {{backTitle}} </span>
            </template>
        </el-page-header>
        <!-- Back Header End -->
        <div class="fxn-section fxn-create">
            <el-form :model="addForm" ref="addRef" :rules="addRules" label-width="150px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="我方当事人" prop="name">
                            <el-input v-model="addForm.name" placeholder="请输入我方当事人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="对方当事人" prop="priority">
                            <el-input v-model="addForm.priority" placeholder="请输入对方当事人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="案由" prop="business_type">
                            <el-select v-model="addForm.business_type" filterable clearable placeholder="请选择">
                                <el-option v-for="(item,index) in business_type" :label="item.value" :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="案件编号" prop="case_no">
                            <el-input v-model="addForm.case_no" placeholder="请输入案件编号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="业务地区" prop="area">
                            <el-select v-model="addForm.area" filterable clearable placeholder="请选择">
                                <el-option v-for="(item,index) in areaData" :label="item.value" :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="backType == 'type_nonlawsuit'">
                        <el-form-item label="案件状态" prop="status">
                            <el-select v-model="addForm.status" filterable clearable placeholder="请选择">
                                <el-option v-for="(item,index) in type_nonlawsuit" :label="item.value" :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="backType == 'type_penal'">
                        <el-form-item label="案件状态" prop="status">
                            <el-select v-model="addForm.status" filterable clearable placeholder="请选择">
                                <el-option v-for="(item,index) in type_penal" :label="item.value" :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="backType == 'type_lawsuit'">
                        <el-form-item label="案件状态" prop="status">
                            <el-select v-model="addForm.status" filterable clearable placeholder="请选择">
                                <el-option v-for="(item,index) in type_lawsuit" :label="item.value" :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="委托阶段" prop="entrust_stage">
                            <el-select v-model="addForm.entrust_stage" filterable clearable placeholder="请选择" multiple collapse-tags>
                                <el-option v-for="(item,index) in entrust_stage" :label="item.value" :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="诉讼标的额" prop="target_amount">
                            <el-input v-model="addForm.target_amount" placeholder="请输入诉讼标的额" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="合同金额" prop="contract_amount">
                            <el-input v-model="addForm.contract_amount" placeholder="请输入合同金额" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="承办人员" prop="lawyer_id">
                            <el-select v-model="addForm.lawyer_id" filterable multiple collapse-tags clearable placeholder="请选择">
                                <el-option v-for="(item,index) in userData" :label="item.real_name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="移交证据" prop="evidence">
                            <el-input type="textarea" rows="5" v-model="addForm.evidence" placeholder="请输入移交证据" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="案件详情" prop="description">
                            <el-input type="textarea" rows="5"  v-model="addForm.description" placeholder="请输入案件详情" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="上传附件" prop="files">
                            <UpFiles v-model:fileList="addForm.files" :size="200" accept=".jpg,.png,.docx,.pdf,.xlsx,.pptx" :limit="100"></UpFiles>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <div class="info-title">
                            <el-button type="primary" icon="Plus" plain @click="handlePlus">添加应收款</el-button>
                        </div>
                        <el-row class="info-border" v-for="(item,index) in addForm.case_finance">
                            <el-col :span="12">
                                <el-form-item label="* 应收款名称" prop="title">
                                    <el-input v-model="item.title" placeholder="请输入应收款名称" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="* 款项类型" prop="type">
                                    <el-select v-model="item.type" filterable clearable placeholder="请选择">
                                        <el-option v-for="(item,index) in payment_type" :label="item.value" :value="item.name"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="* 应收金额" prop="money">
                                    <el-input v-model="item.money" placeholder="请输入应收金额" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="* 预计收款时间" prop="coll_time">
                                    <el-date-picker v-model="item.coll_time" format="YYYY-MM-DD" value-format="YYYY-MM-DD"  type="date" clearable placeholder="请选择"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="备注" prop="remark">
                                    <el-input type="textarea" rows="5"  v-model="item.remark" placeholder="请输入详情" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label=" ">
                                    <el-button type="danger" icon="Delete" @click="handleDel(index)">删除</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label=" ">
                            <el-button type="primary" icon="FolderChecked" @click="handleSubmit">提交</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- Section End -->
    </div>
</template>

<script>
    import UpFiles from '../Common/UpFiles.vue'
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        components: { UpFiles },
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                //返回操作
                backStyle: 1,
                backTitle: '',
                backType: '',

                //数据
                business_type: computed(() => store.state.configEnable.business_type),
                type_nonlawsuit: computed(() => store.state.configEnable.type_nonlawsuit),
                type_penal: computed(() => store.state.configEnable.type_penal),
                type_lawsuit: computed(() => store.state.configEnable.type_lawsuit),
                entrust_stage: computed(() => store.state.configEnable.entrust_stage),
                payment_type: computed(() => store.state.configEnable.payment_type),
                areaData: computed(() => store.state.configEnable.business_area),
                userData: computed(() => store.state.userData),

                //表单
                btnLoading: false,
                addRef: '',
                addForm: {
                    name: '',
                    priority: '',
                    business_type: '',
                    case_no: '',
                    area: '',
                    status: '',
                    entrust_stage: '',
                    target_amount: '',
                    contract_amount: '',
                    lawyer_id: '',
                    evidence: '',
                    description: '',
                    files: [],
                    case_finance: [
                        {
                            title: '',
                            type: '',
                            money: '',
                            coll_time: '',
                            remark: '',
                        }
                    ]
                },
                addRules: {
                    name: [{ required: true, message: '请输入我方当事人', trigger: 'blur' }],
                    priority: [{ required: true, message: '请输入对方当事人', trigger: 'blur' }],
                    business_type: [{ required: true, message: '请选择案由', trigger: 'blur' }],
                    area: [{ required: true, message: '请选择地区', trigger: 'blur' }],
                    status: [{ required: true, message: '请选择案件状态', trigger: 'blur' }],
                    entrust_stage: [{ required: true, message: '请选择委托阶段', trigger: 'blur' }],
                    target_amount: [
                        { required: true, message: '请输入诉讼标的额', trigger: 'blur' },
                        { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输⼊正确的格式,可保留两位⼩数' }
                    ],
                    contract_amount: [
                        { required: true, message: '请输入合同金额', trigger: 'blur' },
                        { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输⼊正确的格式,可保留两位⼩数' }
                    ],
                    lawyer_id: [{ required: true, message: '请选择承办人员', trigger: 'blur' }],
                    evidence: [{ required: true, message: '请输入移交证据', trigger: 'blur' }],
                    description: [{ required: true, message: '请输入案件详情', trigger: 'blur' }],
                },
            })

            //提交
            const handleSubmit = () => {
                //附件格式化
                let array = state.addForm.files;
                let files = [];
                for (let index = 0; index < array.length; index++) {
                    files.push(array[index].name);
                }
                //判断应收款数据是否为空
                let case_finance = state.addForm.case_finance;
                if(case_finance.length > 0){
                    for (let index = 0; index < case_finance.length; index++) {
                        if(!case_finance[index].type){
                            return proxy.$msg.error('请选择款项类型');
                        }
                        if(!case_finance[index].money){
                            return proxy.$msg.error('请输入应收金额');
                        }
                        if(!case_finance[index].coll_time){
                            return proxy.$msg.error('请选择预计收款时间');
                        }
                    }
                }
                state.addRef.validate((valid) => {
                    if(valid){
                        state.btnLoading = true;
                        proxy.$http.post('/oa/Lawcase/caseForm',{
                            type: 1,
                            case_type: state.backType,
                            key_id: router.currentRoute.value.query.id,
                            name: state.addForm.name,
                            priority: state.addForm.priority,
                            business_type: state.addForm.business_type,
                            case_no: state.addForm.case_no,
                            area: state.addForm.area,
                            status: state.addForm.status,
                            entrust_stage: String(state.addForm.entrust_stage),
                            target_amount: state.addForm.target_amount,
                            contract_amount: state.addForm.contract_amount,
                            lawyer_id: String(state.addForm.lawyer_id),
                            evidence: state.addForm.evidence,
                            description: state.addForm.description,
                            case_finance: state.addForm.case_finance,
                            files: String(files),
                        })
                        .then(res=> {
                            state.btnLoading = false;
                            const { code, msg ,data } = res;
                            if(code != 1){
                                return proxy.$msg.error(msg);
                            }else{
                                proxy.$msg.success('提交成功');
                                handlePath();
                            }
                        })
                    }
                })
            }

            //添加应收款
            const handlePlus = () => {
                let obj = {
                    title: '',
                    type: '',
                    money: '',
                    coll_time: '',
                    remark: '',
                }
                state.addForm.case_finance.push(obj);
            }

            //删除应收款
            const handleDel = (e) => {
                state.addForm.case_finance.splice(e,1);
            }

            //返回上一页
            const handlePath = () => {
                if(state.backStyle == 'CustomerDetail'){
                    router.push({path: '/' + state.backStyle, query: {id: router.currentRoute.value.query.id}});
                }else{
                    router.push({path: '/' + state.backStyle, query: {type: state.backType}})
                }
            }

            //获取权限
            const authMenu = (value) => {
                let currentRouter = router.currentRoute.value.path;
                let menuArr = (proxy.$public.authMenu(currentRouter).split(','));
                for (let index = 0; index < menuArr.length; index++) {
                    if(value == menuArr[index]){
                        return true
                    }
                }
            }
            
            //Dom加载
            onMounted(()=>{
                let query = router.currentRoute.value.query;
                state.backStyle = query.path;
                state.backType = query.type;
                if(query.path == 'CustomerDetail'){
                    state.backTitle = '客户详情';
                }
                if(query.type == 'type_nonlawsuit'){
                    state.backTitle = '非诉类型';
                }else if(query.type == 'type_penal'){
                    state.backTitle = '刑事类型';
                }else if(query.type == 'type_lawsuit'){
                    state.backTitle = '诉讼类型';
                }
                
                authMenu();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handlePlus,
                handleSubmit,
                handleDel,
                
                //组件方法
                authMenu,
                handlePath,
            }

        },
    })
</script>

<style scoped>
    .fxn-create{
        margin-top: 20px;
        padding: 50px;
    }

    .fxn-create .el-input{
        width: 220px;
    }
    .fxn-create .el-select{
        width: 220px;
    }

    .fxn-create .info-title{
        margin-bottom: 20px;
        padding: 20px 0 10px 140px;
        color: rgba(46, 60, 179, .9);
        font-weight: bold;
        text-indent: 12px;
        border-top: 1px solid #DCDFE6;
        overflow: hidden;
    }

    .fxn-create .info-title .title{
        float: left;
    }

    .fxn-create .info-title .right{
        float: right;
    }

    .fxn-create .info-border{
        padding-bottom: 20px;
    }
</style>